<template>
  <!--编辑-弹出层-->
  <el-form
    ref="editForm"
    :model="formFileds"
    label-width="120px"
    :rules="rules">
    <el-row>
      <el-col :span="12">
        <el-form-item label="角色名称" prop="name">
          <el-input type="text" v-model="formFileds.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="角色权限" prop="selectedIds">
          <el-select v-model="selectedIds" multiple placeholder="请选择用户权限" @change="change">
            <el-option  v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="角色头像" prop="profile">
          <upload-img v-model="formFileds.profile"></upload-img>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button type="primary" @click="handleEdit(formFileds.postGuid)">确定</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {insert,update,detail} from '@/api/userRole'
import uploadImg from '@/views/components/uploadImg'
export default {
  name: "noticeEdit",
  components: {
    uploadImg
  },
  data() {
    return {
      formFileds: {
        permission:0,//用户权限: 1.科研人员 2.科研单位秘书 4.科研管理人员 8.学校领导
        name:null,//角色名称
        profile:null, //角色头像
        updateTime:null, //最后更新时间
        createTime:null, //创建时间
        id: null
      },
      options: [{
        value: 1,
        label: '科研人员'
      }, {
        value: 2,
        label: '科研单位秘书'
      }, {
        value: 4,
        label: '科研管理人员'
      }, {
        value: 8,
        label: '学校领导'
      }],
      selectedIds: [],
      rules: {
        permission: [
          {required: true, message: '用户权限不能为空', trigger: 'blur, change'}
        ],
        name: [
          {required: true, message: '角色名称不能为空', trigger: 'blur, change'}
        ],
        profile: [
          {required: true, message: '角色头像不能为空', trigger: 'blur, change'}
        ],
        updateTime: [
          {required: true, message: '最后更新时间不能为空', trigger: 'blur, change'}
        ],
        creatTime: [
          {required: true, message: '创建时间不能为空', trigger: 'blur, change'}
        ],
      },
    }
  },
  props:["editId"],
  mounted(){
    if (!this.editId){
      return;
    }

    this.getOne(this.editId);
  },
  methods: {
    handleEdit(id) {
      this.$refs.editForm.validate(isValid => {
        if (!isValid) return;
        if(this.editId){
          this.edit();
        }else{
          this.save();
        }
      });
    },
    close(){
      this.$emit("close");
    },
    getOne(id){
      let _this = this;
      detail(id).then(function (data) {
        if (data.code == 200){
          _this.formFileds = data.data;
          _this.resetRoleSelected(_this.formFileds.permission);
        } else{
          _this.$message.error(data.message);
        }
      })
    },
    edit(){
      let _this = this;
      update(this.formFileds).then(function (data) {
        if (data.code == 200){
          _this.$message.success('编辑成功');
          _this.close();
        } else{
          _this.$message.error(data.message);
        }
      })
    },
    save(){
      let _this = this;
      insert(this.formFileds).then(function (data) {
        if (data.code == 200){
          _this.$message.success('新增成功');
          _this.close();
        } else{
          _this.$message.error(data.message);
        }
      })
    },
    reset(){
      this.$refs.editForm.resetFields();
    },
    change(val){
      // 每次选项改变，就重置权限
      let sum = 0;
      for(let i=0;i<this.selectedIds.length;i++){
        sum += this.selectedIds[i];
      }
      this.formFileds.permission = sum;
    },
    resetRoleSelected(val){
      this.selectedIds = [];
      if ((val&1)==1){
        this.selectedIds.push(1);
      }
      if ((val&2)==2){
        this.selectedIds.push(2);
      }
      if ((val&4)==4){
        this.selectedIds.push(4);
      }
      if ((val&8)==8){
        this.selectedIds.push(8);
      }
    }
  }
}
</script>

<style scoped lang="less">
.el-form {
  padding: 0 10px;
}
.el-date-editor {
  width: 100% !important;
}
.el-pagination{
  margin-top: 10px;
  float: left;
}
.tool_style{
  padding: 10px 0;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
